<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>

<form class="layui-form">
    <button type="button" class="layui-btn" id="batchDeleteBtn">
        <i class="layui-icon">&#xe640;</i> 批量删除
    </button>
    <button type="button" class="layui-btn" id="addUserBtn">
        <i class="layui-icon">&#xe608;</i> 添加用户
    </button>

    <div class="layui-inline">
        <div class="layui-input-inline" style="width: 150px">
            <select name="column" id="column">
                <option value="">请选择搜索条件</option>
                <option value="name">用户名</option>
                <option value="password">密码</option>
                <option value="sex">性别</option>
                <option value="email">邮箱</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <input type="text" id="value" name="value" lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn" id="search">搜索</button>
    <button type="button" class="layui-btn" id="importExcelBtn" style="margin-left: 166px">
        <i class="layui-icon">&#xe67c;</i> 导入Excel表格
    </button>
    <button type="button" class="layui-btn" id="exportExcelBtn">
        <i class="layui-icon">&#xe67d;</i> 批量导出Excel
    </button>
    <button type="button" class="layui-btn" id="exportExcelAllBtn" style="margin-left: 0px">
        <i class="layui-icon">&#xe67d;</i> 全部导出Excel
    </button>
</form>

<table id="userTable" lay-filter="userTable"></table>


<!-- 添加页面开始 -->
<form class="layui-form" id="addUserForm" lay-filter="addUserForm" style="display: none;padding: 20px 55px 0px 0px">
    <input type="hidden" id="addphoto" name="photo" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text"  name="name" lay-verify="required" placeholder="请输入用户名" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" lay-verify="required" placeholder="请输入密码" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="1" title="男">
            <input type="radio" name="sex" value="0" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadadd">
                <i class="layui-icon">&#xe67c;</i>上传头像
            </button>
            <img src='' height='50px' id="addHead"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        <div class="layui-input-block">
            <input type="text" name="birthDay" id="addbirthDay" lay-verify="required" class="layui-input" >
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" lay-verify="required" placeholder="请输入邮箱" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit  lay-filter="addUserSubmit">立即添加</button>
            <button type="button" id="closeUserAdd" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<!-- 添加页面结束 -->

<!-- 编辑页面开始 -->
<form class="layui-form" id="amendUserForm" lay-filter="amendUserForm" style="display: none;padding: 20px 55px 0px 0px">
    <input type="hidden" id="amendphoto" name="photo" value="">
    <input type="hidden" id="id" name="id" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block" id="sex">


        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadAmend">
                <i class="layui-icon">&#xe67c;</i>上传头像
            </button>
            <img src='' height='50px' id="amendHead"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        <div class="layui-input-block">
            <input type="text" name="birthDay" id="birthDay" lay-verify="required" class="layui-input" lay-verify="required">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit  lay-filter="amendUserSubmit">确认修改</button>
            <button type="button"  id="closeAmendUser" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<!-- 编辑页面结束 -->



<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">


    layui.use(['table','form','layer','laydate','upload'],function () {

        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var upload = layui.upload;
        table.render({
            elem:'#userTable'
            ,url:'user/queryAllUser'
            ,page:true
            ,limit:6
            ,limits:[3,4,5,6]
            ,cols:[[
                {type:'checkbox'}
                ,{field:'id',title:'编号',sort:true}
                ,{field:'name',title:'用户名'}
                ,{field:'password',title:'密码'}
                ,{field:'sex',title:'性别',templet:function(d){
                        if(d.sex==0){
                            return '女'
                        }else{
                            return '男'
                        }
                    }}
                ,{field:'photo',title:'头像',align:'center',templet:function (d) {
                        return "<img src='"+d.photo+"' height='50px'/>";
                    }}
                ,{field:'birthDay',title:'生日'}
                ,{field:'email',title:'邮箱'}
                ,{toolbar: '#barDemo'}
            ]]
        });
        /**
         * 监听userTable的查看编辑删除按钮的单击事件
         * */
        table.on('tool(userTable)',function (obj) {
            var data = obj.data;
            //编辑按钮的单击事件
            if(obj.event=='edit'){
                form.val("amendUserForm",data);
                $.ajax({
                    url:'user/queryUserById',
                    data:{id:data.id},
                    type:"post",
                    dataType:"json",
                    success:function (result) {
                        if(result.code==0){
                            if(result.data.sex==0){
                                $("#sex").html("<input type=\"radio\" name=\"sex\" value=\"1\" title=\"男\">\n" +
                                    "             <input type=\"radio\" name=\"sex\" value=\"0\" title=\"女\" checked>")
                            }else{
                                $("#sex").html("<input type=\"radio\" name=\"sex\" value=\"1\" title=\"男\" checked>\n" +
                                    "                    <input type=\"radio\" name=\"sex\" value=\"0\" title=\"女\" >")
                            }
                            form.render('radio');
                            $("#amendHead").prop("src",result.data.photo);
                            laydate.render({
                                elem:'#birthDay',
                                theme: 'molv'
                            });
                        }
                    }
                });
                layer.open({
                    type:1,
                    title:['编辑用户信息','font-size:18px;color:orange;'],
                    area:['450px'],
                    content:$("#amendUserForm"),
                });
            }
            //删除按钮的单击事件
            if(obj.event=='del'){
                layer.confirm("你确定要删除吗",{icon:'3',title:'提示'},function () {
                    $.ajax({
                        url:'user/dropUserById',
                        data:{id:data.id},
                        type:"post",
                        dataType:"json",
                        success:function (result) {
                            if(result.code==0){
                                table.reload("userTable",{
                                    page:{
                                        curr:1
                                    }
                                });
                                layer.msg(result.msg,{icon:'1',title:'提示'});
                            }
                        }
                    });
                })
            }
        });
        /**
         * 点击添加按钮弹出层展示添加页面
         * */
        $("#addUserBtn").click(function () {
            $("#addHead").prop("src","");
            laydate.render({
                elem:'#addbirthDay',
                theme: 'molv'
            })
            layer.open({
                type:1,
                title:['添加用户','font-size:18px;color:orange;'],
                content:$("#addUserForm"),
            });
        });
        /**
         * 渲染添加页面的头像上传
         * */
        upload.render({
            elem:'#uploadadd'
            ,url:'user/uploadHead'
            ,done: function(result){
                if(result.code==0){
                    $("#addHead").prop("src",null);
                    $("#addphoto").val(result.picPath);
                    $("#addHead").prop("src",result.picPath);
                }
            }
        });
        /**
         * 监听添加用户页面的 立即添加 按钮
         * */
        form.on("submit(addUserSubmit)",function (obj) {
            layer.confirm("你确定要添加吗？",{icon:'3',title:'提示'},function () {
                $.ajax({
                    url:'user/addUser',
                    data:obj.field,
                    type:"post",
                    dataType:"json",
                    success:function (data) {
                        if(data.code==0){
                            obj.form.reset();
                            layer.closeAll();
                            table.reload("userTable");
                            layer.msg(data.msg,{icon:'1',title:'提示'});
                        }
                    }
                });
            });
            return false;
        });
        /**
         * 渲染修改页面的头像上传
         * */
        upload.render({
            elem: '#uploadAmend'
            ,url:'user/uploadHead'
            ,done: function(result){
                if(result.code==0){
                    $("#amendHead").prop("src",null);
                    $("#amendphoto").val(result.picPath);
                    $("#amendHead").prop("src",result.picPath);
                }
            }
        });
        /**
         * 监听修改页面的确认修改按钮
         * */
        form.on("submit(amendUserSubmit)",function (obj) {
            layer.confirm("你确定要修改吗？",{icon:'3',title:'提示'},function () {
                $.ajax({
                    url:'user/amendUser',
                    data:obj.field,
                    type:"post",
                    dataType:"json",
                    success:function (data) {
                        if(data.code==0){
                            obj.form.reset();
                            layer.closeAll();
                            table.reload("userTable");
                            layer.msg(data.msg,{icon:'1',title:'提示'});
                        }
                    }
                });
            })
            return false;
        });
        /**
         * 各个页面的一些关闭按钮
         * */
        $("#closeUserAdd").click(function () {
            layer.closeAll();
        });
        $("#closeAmendUser").click(function () {
            layer.closeAll();
        })
        /**
         * 搜索功能
         * */
        $("#search").click(function () {
            if($("#column").val()==""){
                table.reload("userTable",{
                    url:'user/queryAllUser',
                    page:{
                        curr:1
                    }
                });
            }else{
                table.reload("userTable",{
                    url:'user/searchUser',
                    where:{
                        column:$("#column").val(),
                        value:$("#value").val()
                    }
                });
            }
        });

        /**
         *批量删除功能
         * */
        $("#batchDeleteBtn").click(function () {
            var checkStatus = table.checkStatus('userTable');
            if(checkStatus.data.length>0){
                layer.confirm("你确定要删除吗？",{icon:'3',title:'提示'},function () {
                    var ids = "";
                    for(var i=0;i<checkStatus.data.length;i++){
                        ids += "ids="+checkStatus.data[i].id+"&"
                    }
                    $.ajax({
                        url:"user/dropUserByIds",
                        data:ids,
                        type:"post",
                        dataType:"json",
                        success:function (data) {
                            if(data.code==0){
                                table.reload("userTable",{
                                    page:{
                                        curr:1
                                    }
                                });
                                layer.msg(data.msg,{icon:'1',title:'提示'});
                            }
                        }
                    });
                })
            }else{
                layer.msg("请至少选择一个用户！",{icon:'2',title:'提示'});
            }
        });
        /**
         * 导入Excel表格功能
         * */
        upload.render({
            elem: '#importExcelBtn'
            ,url: 'user/importExcel'
            ,accept:"file"
            ,exts:'xls|xlsx'
            ,done: function(result){
                if(result.code==0){
                    table.reload("userTable");
                    layer.msg(result.msg,{icon:'1',title:'提示'})
                }
            }
        });
        /**
         * 批量导出Excel表格功能
         * */
        $("#exportExcelBtn").click(function () {
            var checkStatus = table.checkStatus('userTable');
            if(checkStatus.data.length>0){
                layer.confirm("你确定要导出Excel表格吗？",{icon:'3',title:'提示'},function () {
                    var ids = "";
                    for(var i=0;i<checkStatus.data.length;i++){
                        ids += "ids="+checkStatus.data[i].id+"&"
                    }
                    location.href="user/exportExcel?"+ids;
                    layer.closeAll();
                })
            }else{
                layer.msg("请至少选择一个用户导出Excel！",{icon:'2',title:'提示'});
            }
        });
        /**
         * 导出全部数据Excel表格功能
         * */
        $("#exportExcelAllBtn").click(function () {
            layer.confirm("你确定要导出Excel表格吗？",{icon:'3',title:'提示'},function () {
                location.href='user/exportExcelAll';
                layer.closeAll();
            })
        });






    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
</html>